<template>
    <div id="add-img">
        <div class="img_box lt m-l-14" v-for="(item,index) in imgArr" :key="index">
            <div class="img_show_box">
                <img :src="item" alt="">
                <i class="img_delete" @click="deleteImg(index)"></i>
                <!-- <i class="img_delete" @click="imgArr.splice(index,1)"></i>   deleteImg(index) -->
            </div>
        </div>
        <!--<img src="../img/addImg.jpg" alt="">-->
        <div class="add lt m-l-14">
            <div class="img_box" v-if="allowAddImg">
                <input type="file" accept="image/*" multiple="multiple" @change="changeImg($event)" class="file-input">
                <div class="filter"></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            imgData: '',
            imgArr: [], //imgArr1 - 3都用来保存图片
            imgSrc: '',
            allowAddImg: true
        }
    },
    methods: {
        changeImg: function(e) {
            var _this = this;
            var imgLimit = 1024;
            var files = e.target.files;
            var image = new Image();
            if (files.length > 0) {
                var dd = 0;
                var timer = setInterval(function() {
                    if (files.item(dd).type != 'image/png' && files.item(dd).type != 'image/jpeg' && files.item(dd).type != 'image/gif') {
                        return false;
                    }

                    if (files.item(dd).size > imgLimit * 102400) {
                        //to do sth
                    } else {
                        image.src = window.URL.createObjectURL(files.item(dd));
                        image.onload = function() {
                            // 默认按比例压缩
                            var w = image.width,
                                h = image.height,
                                scale = w / h;
                            w = 200;
                            h = w / scale;
                            // 默认图片质量为0.7，quality值越小，所绘制出的图像越模糊
                            var quality = 0.7;
                            //生成canvas
                            var canvas = document.createElement('canvas');
                            var ctx = canvas.getContext('2d');
                            // 创建属性节点
                            var anw = document.createAttribute("width");
                            anw.nodeValue = w;
                            var anh = document.createAttribute("height");
                            anh.nodeValue = h;
                            canvas.setAttributeNode(anw);
                            canvas.setAttributeNode(anh);
                            ctx.drawImage(image, 0, 0, w, h);
                            var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();//图片格式
                            var base64 = canvas.toDataURL("image/" + ext, quality);
                            // 回调函数返回base64的值
                            if (_this.imgArr.length <= 4) {
                                _this.imgArr.unshift('');
                                console.log(_this.imgArr);
                                // this.$emit('showbox',_this.imgArr); //触发showbox方法，'the msg'为向父组件传递的数据
                                _this.imgArr.splice(0, 1, base64);//替换数组数据的方法，此处不能使用：this.imgArr[index] = url;
                                _this.img()  //调用img函数然后对接图片
                                if (_this.imgArr.length >= 5) {
                                    _this.allowAddImg = false;
                                }
                            }
                        }
                    }
                    if (dd < files.length - 1) {
                        dd++;
                    } else {
                        clearInterval(timer);
                    }
                }, 1000)
            }
        },
        img() {
            // a[a.length - 1]
            console.log(this.imgArr);
            
            var params = new URLSearchParams();
            params.append("base64", this.imgArr[0]);
            this.$http({
                method: 'post',
                url: localPath + '/base64/upload',
                data: params
            }).then((response) => {
                // console.log(response.data.message);
                
                 //给父组件传值
                this.$emit('arr', response.data.message);
                //MessageBox.alert(response.data.message);
            }).catch((error) => {
                console.log(error);
            })
        },
        deleteImg: function(index) {
            
            this.imgArr.splice(index, 1);
            if (this.imgArr.length < 5) {
                this.allowAddImg = true;
            }
        }
    }

}
</script>

<style>

</style>

